<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>自定义指令-指令实例属性</title>
</head>
<body>
    <div id="example-1" v-demo:ccc.b.a="msg">

    </div>
    <script src="../lib/vue.js"></script>
<script>
    /*
    *所有钩子函数将被复制到实际的指令对象中，
    * 钩子内this指向这个指令对象。
    * 这个对象暴露了一些有用的属性：
    * el:指令绑定的元素
    * vm：拥有该指令的上下文ViewModel
    * expression：指令的表达式，不包含参数和过滤器
    * arg：指令的参数
    * name：指令的名字，不包含前缀
    * modifiers：一个对象，包含指令的修饰符
    * descriptor：一个对象，包含指令的解析结果
    * */
    Vue.directive('demo',{
        bind : function () {
            console.log(this);
        },
        update : function (value) {
            console.dir(this);
            this.el.innerHTML =
                'el-'           + this.el + '<br/>' +
                'vm-'           + this.vm + '<br/>' +
                'expression-'   + this.expression + '<br/>' +
                'arg-'          + this.arg + '<br/>' +
                'name-'         + this.name + '<br/>' +
                'modifiers-'    + JSON.stringify(this.modifiers) + '<br/>' +
                'value-'        + value
        }
    })
    var exampleVm = new Vue({
        el : '#example-1',
        data : {
            msg : 'hello=.=!'
        }
    })
</script>
</body>
</html>